<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/jquery.js"></script>
    </head>
    <body>
        <button class="btn">get无参</button>
        <button class="btn">get有参</button>
        <button class="btn">post无参</button>
        <button class="btn">post有参</button>
        <script>
            $(function(){
                $('.btn').eq(0).click(function(){
                    //get无参
                    $.get('http://127.0.0.1:8000/api/get_list01/', {}, function(res){
                        console.log(res)
                    })
                })
                $('.btn').eq(1).click(function(){
                    //get有参
                    data = {
                        'id': 10,
                        'user': 'root',
                        'sex': '男'
                    }
                    $.get('http://127.0.0.1:8000/api/get_list02/', data, function(res){
                        console.log(res)
                    })
                })
                $('.btn').eq(2).click(function(){
                    //post无参
                    $.post('http://127.0.0.1:8000/api/post_obj01/', {}, function(res){
                        console.log(res)
                    })
                })
                $('.btn').eq(3).click(function(){
                    //post有参
                    data = {
                        'id': 10,
                        'user': 'root',
                        'sex': '男'
                    }
                    $.post('http://127.0.0.1:8000/api/post_obj02/', data, function(res){
                        console.log(res)
                    })
                })
            })
        </script>
    </body>
</html>